import { View } from '@tarojs/components';
import s from './index.module.scss'
import { useState } from 'react';


interface ButtonProps {
  text?: string,
  borderColor?: any,
  radioColor?: any,
  cheked?: boolean
  onChange?: any
}

export default function Button(props: ButtonProps) {
  const { text, borderColor = '#fff', cheked = true, radioColor = 'hsl(245deg, 100%, 60%)', onChange } = props
  const [active, setActive] = useState(cheked)
  const [scale, setScale] = useState(false)
   
  return(
    //滚动条
    <View className={s.container} onClick={() =>{
      setActive(!active)
      setScale(true)
      onChange && onChange(active)
    } }>
      <View 
        className={scale ? `${s.btn} ${s.active}` : s.btn}
        style={{border: `2px solid ${borderColor}`}}
        >
        <View 
          className={active ? s.radio : `${s.radio} ${s.active}`} 
          onTransitionEnd={() => setScale(false)}
          style={{backgroundColor: `${radioColor}`}}
          ></View>
      </View>
      <View className={s.text}>{text}</View>
    </View>
  )
}